<div class="flex items-center justify-between eo_navbar">
  <div class="flex">
    <img class="logo" src="assets/images/logo.svg" />
    <!-- star -->
    <a href="https://github.com/eolinker/eoapi" target="_blank" class="flex items-center can_be_click">
      <img class="mx-4" src="https://img.shields.io/github/stars/eolinker/eoapi?style=social" alt="" />
    </a>
    <!-- Select workspace -->
    <div
      *ngIf="!status.isShare"
      class="flex items-center can_be_click"
      nz-dropdown
      nzTrigger="click"
      [nzDropdownMenu]="workspaceMenu"
    >
      <eo-iconpark-icon
        class="mr-[5px]"
        name="link-cloud-{{ workspaceService.currentWorkspace?.id !== -1 ? 'sucess' : 'faild' }}"
      >
      </eo-iconpark-icon>
      {{ workspaceService.currentWorkspace.title }}
      <eo-iconpark-icon class="ml-[3px]" name="down"></eo-iconpark-icon>
    </div>
    <nz-dropdown-menu #workspaceMenu="nzDropdownMenu">
      <ul class="ml-[-11px]" nz-menu>
        <!-- Search/Add workspace -->
        <div class="flex py-[5px] px-[12px]">
          <input
            nz-input
            type="text"
            class="flex-1 px-3 eo-search-input"
            i18n-placeholder
            placeholder="Search Workspace"
            [(ngModel)]="searchValue"
          />
          <button
            nz-tooltip
            i18n-nzTooltipTitle
            nzTooltipTitle="New Workspace"
            nzType="primary"
            nz-button
            (click)="addWorkspace()"
            class="flex w-[20px] items-center justify-center ml-3 text-base shrink-0"
          >
            <eo-iconpark-icon name="plus" size="16px"></eo-iconpark-icon>
          </button>
        </div>
        <!-- Workspaces -->
        <li
          style="color: #000"
          nz-menu-item
          (click)="changeWorkspace(item)"
          [nzSelected]="workspaceService.currentWorkspace?.id === item.id"
          *ngFor="let item of searchWorkspace"
        >
          <eo-iconpark-icon class="mr-[5px]" name="link-cloud-{{ item.id !== -1 ? 'sucess' : 'faild' }}">
          </eo-iconpark-icon>
          {{ item.title }}
        </li>
      </ul>
    </nz-dropdown-menu>
  </div>
  <div class="flex items-center can_be_click">
    <button
      *ngIf="!workspaceService.isLocal && !status.isShare"
      nz-button
      nzType="default"
      class="mx-2 btn_scondary"
      nz-popover
      [nzPopoverContent]="contentTemplate"
      nzPopoverPlacement="bottomRight"
      nzPopoverTrigger="click"
      i18n
    >
      Share
    </button>
    <ng-template #contentTemplate>
      <div class="w-[360px] pb-4">
        <p i18n class="font-bold">Share via link</p>
        <p i18n class="pb-2 text-xs text-gray-400">
          This link will be updated with the API content. Everyone can access it without logging in
        </p>
        <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
          <input readonly type="text" nz-input [value]="shareLink" />
        </nz-input-group>
      </div>
    </ng-template>
    <ng-template #suffixIconButton>
      <button nz-button nzType="primary" *ngIf="!isCopy" (click)="handleCopy()">Copy</button>
      <button nz-button nzType="default" *ngIf="isCopy" class="text-[#158565]">Copied</button>
    </ng-template>
    <nz-select *ngIf="status.isShare" [(ngModel)]="langValue" nzBorderless (ngModelChange)="handleSwitchLang($event)">
      <nz-option nzValue="en-US" nzLabel="English"></nz-option>
      <nz-option nzValue="zh-Hans" nzLabel="简体中文"></nz-option>
    </nz-select>

    <span class="mx-1 line"></span>

    <!-- help -->
    <span class="flex items-center justify-center icon" nz-dropdown [nzDropdownMenu]="helpMenu">
      <eo-iconpark-icon name="help"> </eo-iconpark-icon>
    </span>
    <nz-dropdown-menu #helpMenu="nzDropdownMenu">
      <ul nz-menu>
        <a href="https://docs.eoapi.io" target="_blank" nz-menu-item i18n>Document</a>
        <li nz-menu-divider></li>
        <a
          href="https://github.com/eolinker/eoapi/issues/new?assignees=&labels=&template=bug_report.yml&environment={{
            issueEnvironment
          }}"
          target="_blank"
          nz-menu-item
          i18n
          >Report Issue</a
        >
      </ul>
    </nz-dropdown-menu>
    <span class="mx-1 line"></span>
    <!-- setting -->
    <span
      *ngIf="!status.isShare"
      class="flex items-center justify-center icon"
      i18n-nzTooltipTitle
      nz-tooltip
      [nzTooltipMouseEnterDelay]="0.7"
      nzTooltipTitle="Open Settings"
      (click)="openSettingModal()"
    >
      <eo-iconpark-icon name="setting-two"></eo-iconpark-icon>
    </span>
    <!-- User -->
    <span *ngIf="!status.isShare" class="flex items-center justify-center icon" nz-dropdown [nzDropdownMenu]="UserMenu">
      <eo-iconpark-icon name="me"> </eo-iconpark-icon>
    </span>
    <nz-dropdown-menu #UserMenu="nzDropdownMenu">
      <ul nz-menu>
        <li nz-menu-item *ngIf="!userService.isLogin">
          <button type="button" (click)="loginOrSign()" i18n>Sign in for Collaboration</button>
        </li>
        <ng-container *ngIf="userService.isLogin">
          <li class="px-[12px] py-[5px] text-neutral-400 font-bold">
            {{ userService.userProfile?.username }}
          </li>
          <li nz-menu-item (click)="openSettingModal()">
            <button type="button" i18n>Account Setting</button>
          </li>
          <li nz-menu-item (click)="loginOut()">
            <button type="button" i18n>Sign Out</button>
          </li>
        </ng-container>
      </ul>
    </nz-dropdown-menu>
    <!-- Windows pc system operate -->
    <div *ngIf="!OS_TYPE.includes('mac') && electron.isElectron">
      <span
        nz-tooltip
        i18n-nzTooltipTitle
        nzTooltipTitle="Minimize"
        [nzTooltipMouseEnterDelay]="0.7"
        class="iconfont icon-jianhao mr10 fs24 cp"
        nzTooltipPlacement="bottom"
        (click)="minimize()"
      >
      </span>
      <span
        nz-tooltip
        i18n-nzTooltipTitle
        [nzTooltipMouseEnterDelay]="0.7"
        [nzTooltipTitle]="isMaximized ? 'Restore' : 'Maximize'"
        class="iconfont icon-{{ isMaximized ? 'copy' : 'duoxuanweixuanzhong' }} mr10 fs24 cp"
        (click)="toggleMaximize()"
      >
      </span>
      <span
        nz-tooltip
        i18n-nzTooltipTitle
        [nzTooltipMouseEnterDelay]="0.7"
        nzTooltipTitle="Close"
        class="iconfont icon-guanbi pr15 fs24 cp"
        (click)="close()"
      >
      </span>
    </div>
    <!-- Web download client -->
    <div *ngIf="!electron.isElectron && !status.isShare">
      <div class="btn py-1.5 px-2 mx-1 flex items-center" nz-dropdown i18n [nzDropdownMenu]="download">
        <span class="flex items-center delete-icon">
          <eo-iconpark-icon name="down-two" size="14px"></eo-iconpark-icon>
        </span>
        <span class="ml-1">Download</span>
      </div>
      <nz-dropdown-menu #download="nzDropdownMenu">
        <ul nz-menu>
          <ng-container *ngFor="let item of resourceInfo; let index = index">
            <a [href]="item.link" nz-menu-item>{{ item.name }}</a>
            <li nz-menu-divider *ngIf="index !== resourceInfo.length - 1"></li>
          </ng-container>
        </ul>
      </nz-dropdown-menu>
    </div>
  </div>
</div>
